<template>
  <div>
    <div class='nya'>
      <table>
        <LikeDogs v-for="(item, index) in list" :key="index" :img="item.dogImgUrl" :title="item.dogName" @clickLike='likeDoges'/>
      </table>
    </div>
    <div class='nya'>
      <p><b>您喜欢的狗狗</b></p>
      <p v-for="(item, index) in like" :key="index">{{item}}</p>
    </div>
  </div>
</template>

<script>
import img1 from'./assets/1.webp'
import img2 from'./assets/2.webp'
import img3 from'./assets/3.webp'
import img4 from'./assets/4.webp'
import img5 from'./assets/5.webp'
import img6 from'./assets/6.webp'
import LikeDogs from './components/LikeDogs.vue'
export default {
  components: {
    LikeDogs
  },
  data(){
    return{
      list:[
              {
                  dogImgUrl: img1,
                  dogName: "博美",
              },
              {
                  dogImgUrl:img2,
                  dogName: "泰迪",
              },
              {
                  dogImgUrl:img3,
                  dogName: "金毛",
              },
              {
                  dogImgUrl:img4,
                  dogName: "哈士奇",
              },
              {
                  dogImgUrl:img5,
                  dogName: "阿拉斯加",
              },
              {
                  dogImgUrl:img6,
                  dogName: "萨摩耶",
              },
          ],
      like:[]
    }
  },
  methods:{
    likeDoges(dog){
      this.like.push(dog)
    }
  }
}
</script>

<style>
  table {
    width: 900px;
  }
  .nya{
    float: left;
  }
</style>